<template>
  <div class="choiceGoods">
    <el-dialog
      :title="dialogVisibleTile"
      :visible.sync="dialogVisible"
      width="780px"
      :destroy-on-close="false"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        :labelWidth="labelWidth"
        class="demo-ruleForm"
      >
        <el-tabs v-model="keyName" type="card" @tab-click="callback">
          <el-tab-pane
            :label="item.label + '(' + (item.total ? item.total : 0) + ')'"
            :name="item.value"
            v-for="(item, index) in businessTypeList"
            :key="index"
          >
            <el-row :gutter="10">
              <el-col :xs="24" :sm="24">
                <el-form-item label="商品类目：">
                  <el-cascader
                    :options="categoryIdList"
                    v-model="pid"
                    @change="categoryIdChange"
                    placeholder="请选择商品类目"
                    :props="{ checkStrictly: true }"
                    style="width: 100%"
                    :show-all-levels="false"
                    :key="cascaderKey"
                  ></el-cascader>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" style="text-align: center">
                <el-transfer
                  style="text-align: left; display: inline-block"
                  v-model="ruleForm.chioseVal"
                  :titles="['全选商品', '已选商品']"
                  :button-texts="['到左边', '到右边']"
                  @change="chioseGoods"
                  :format="{
                    noChecked: '${total}',
                    hasChecked: '${checked}/${total}',
                  }"
                  :data="dataList"
                ></el-transfer>
                <el-pagination
                  :page-sizes="[10, 20, 30, 40, 50, 100]"
                  :pager-count="7"
                  :current-page="page.current"
                  :page-size="page.size"
                  :total="page.total"
                  layout="prev, pager, next, jumper"
                  style="text-align: left; margin: 10px 10px 0 19px"
                  @size-change="sizeChange"
                  @current-change="currentChange"
                  small
                ></el-pagination>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleSure()" :loading="loading"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  platformgoodscategorytree,
  pustShopGoodsList,
  pustShopGoodsListPage,
  pushGoodsToShop,
} from "@/api/shop/shop/shopGoodsList.js";
export default {
  data() {
    return {
      dialogVisible: false,
      dialogVisibleTile: "",
      loading: false,
      labelWidth: "120px",
      rules: {},
      pid: [],
      ruleForm: {
        chioseVal: [],
        chioseGoods: [],
      },
      dataVal: [],
      categoryIdList: [],
      dataList: [],
      cascaderKey: 0,
      page: {
        total: 0,
        size: 100,
        current: 1,
      },
      keyName: "02",
      businessTypeList: [],
    };
  },
  methods: {
    getList() {
      this.pid = [];
      this.categoryIdList = [];
      // this.ruleForm.categoryId = "";
      ++this.cascaderKey;
      platformgoodscategorytree({ businessType: this.keyName }).then((val) => {
        //商品类目
        let data = val.data.data;
        this.categoryIdList = data.map((item) => {
          return {
            value: item.categoryId,
            label: item.categoryName,
            children: item.children.map((items) => {
              return {
                value: items.categoryId,
                label: items.categoryName,
              };
            }),
          };
        });
      });
      this.getPustGoods({
        categoryId: this.ruleForm.categoryId,
        businessType: this.keyName,
      });
      pustShopGoodsList({
        //取总数
        shopId: this.$route.query.shopId,
        categoryId: this.ruleForm.categoryId,
        businessType: this.keyName,
      }).then((val) => {
        setTimeout(() => {
          this.businessTypeList.forEach((item) => {
            if (this.keyName == item.value) {
              item.total = val.data.data.length;
            }
            this.$forceUpdate();
          });
        }, 0);
      });
    },
    currentChange(current) {
      this.page.current = current;
      this.getPustGoods({
        categoryId: this.ruleForm.categoryId,
        businessType: this.keyName,
      });
    },
    sizeChange(size) {
      this.page.size = size;
      this.getPustGoods({
        categoryId: this.ruleForm.categoryId,
        businessType: this.keyName,
      });
    },
    getPustGoods(obj) {
      this.dataList = [];
      this.businessTypeList = this.$store.getters.businessTypeList;
      pustShopGoodsListPage(
        Object.assign(obj, { shopId: this.$route.query.shopId }, this.page)
      ).then((val) => {
        if (this.keyName == obj.businessType) {
          this.page = {
            total: val.data.data.total,
            size: val.data.data.size,
            current: val.data.data.current,
          };
          let data = val.data.data.records;

          // this.dataVal = val.data.data.records;
          this.dataList = data.map((item) => {
            return {
              key: item.id,
              label: item.goodsName,
            };
          });
          this.$forceUpdate();
        }
        // setTimeout(() => {
        //   this.businessTypeList.forEach((item) => {
        //     if (obj.businessType == item.value) {
        //       item.total = val.data.data.records.length;
        //     }
        //     this.$forceUpdate();
        //   });
        // }, 0);
      });
    },
    handleSure() {
      let obj = {};
      obj.shopId = this.$route.query.shopId;
      obj.ids = this.ruleForm.chioseVal;
      this.loading = true;
      pushGoodsToShop(obj)
        .then((val) => {
          this.$emit("getList");
          this.$message.success("添加成功");
          this.handleClose();
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleClose() {
      this.dialogVisible = false;
      this.ruleForm = {
        chioseVal: [],
        chioseGoods: [],
      };
      this.pid = [];
      this.$store.commit("SET_BUSINESSTYPELIST", [
        {
          label: "商超",
          value: "02",
        },
        {
          label: "咖吧",
          value: "05",
        },
        {
          label: "洗衣",
          value: "03",
        },
        {
          label: "家政",
          value: "04",
        },
      ]);
    },
    chioseGoods(e) {
      // this.ruleForm.chioseGoods = [];
      // console.log(e);
      // e.forEach((item) => {
      //   this.dataVal.forEach((items) => {
      //     if (items.id == item) {
      //       this.ruleForm.chioseGoods.push(items);
      //     }
      //   });
      // });
    },
    categoryIdChange(e) {
      if (e.length > 1) {
        this.ruleForm.categoryId = e[1];
      } else {
        this.ruleForm.categoryId = e[0];
      }
      (this.page = {
        total: 0,
        size: 10,
        current: 1,
      }),
        this.getPustGoods({
          categoryId: this.ruleForm.categoryId,
          businessType: this.keyName,
        });
    },
    callback() {
      this.getList();
    },
  },
};
</script>

<style>
</style>